import { usePortfolio } from '../context/PortfolioContext';

const WorkStats = () => {
  const { allWorks } = usePortfolio();

  // 计算统计数据
  const totalWorks = allWorks.length;
  const categories = [...new Set(allWorks.map(work => work.category).filter(Boolean))];
  const totalCategories = categories.length;
  const totalCreators = [...new Set(allWorks.map(work => work.creator))].length;
  
  // 按分类统计
  const categoryStats = categories.map(category => ({
    name: category,
    count: allWorks.filter(work => work.category === category).length
  })).sort((a, b) => b.count - a.count);

  // 最新作品
  const recentWorks = allWorks
    .filter(work => work.createdAt)
    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
    .slice(0, 3);

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
      {/* 总体统计 */}
      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
          总体统计
        </h3>
        <div className="space-y-3">
          <div className="flex justify-between">
            <span className="text-gray-600 dark:text-gray-400">作品总数</span>
            <span className="font-semibold text-blue-600 dark:text-blue-400">{totalWorks}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-600 dark:text-gray-400">分类数量</span>
            <span className="font-semibold text-green-600 dark:text-green-400">{totalCategories}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-600 dark:text-gray-400">创作者数量</span>
            <span className="font-semibold text-purple-600 dark:text-purple-400">{totalCreators}</span>
          </div>
        </div>
      </div>

      {/* 分类统计 */}
      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
          分类分布
        </h3>
        <div className="space-y-2">
          {categoryStats.slice(0, 5).map((category, index) => (
            <div key={category.name} className="flex justify-between items-center">
              <span className="text-sm text-gray-600 dark:text-gray-400 truncate">
                {category.name}
              </span>
              <div className="flex items-center gap-2">
                <div className="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                  <div 
                    className="bg-blue-500 h-2 rounded-full transition-all duration-300"
                    style={{ width: `${(category.count / totalWorks) * 100}%` }}
                  ></div>
                </div>
                <span className="text-sm font-medium text-gray-900 dark:text-gray-100 w-6 text-right">
                  {category.count}
                </span>
              </div>
            </div>
          ))}
          {categoryStats.length === 0 && (
            <p className="text-sm text-gray-500 dark:text-gray-400">暂无分类数据</p>
          )}
        </div>
      </div>

      {/* 最新作品 */}
      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">
          最新作品
        </h3>
        <div className="space-y-3">
          {recentWorks.map((work) => (
            <div key={work.id} className="flex items-center gap-3">
              <img 
                src={work.coverUrl} 
                alt={work.title}
                className="w-10 h-10 object-cover rounded"
                onError={(e) => {
                  e.target.src = 'https://via.placeholder.com/40x40?text=No+Image';
                }}
              />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
                  {work.title}
                </p>
                <p className="text-xs text-gray-500 dark:text-gray-400">
                  {work.creator} • {new Date(work.createdAt).toLocaleDateString('zh-CN')}
                </p>
              </div>
            </div>
          ))}
          {recentWorks.length === 0 && (
            <p className="text-sm text-gray-500 dark:text-gray-400">暂无作品数据</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default WorkStats;